<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" class="demo-form-inline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.shelves.shelvestaskcode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.shelvestaskcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.shelves.shelvescode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.shelvescode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordernumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.tasknumber')">
            <el-input maxlength="20" show-word-limit v-model="formInline.tasknumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="SKU">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.suppliercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.erpordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.erpordercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button type="primary" @click="appoint" v-if="hasPermission('assign')">{{$t('m.shelves.appoint')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-row class="table-wrap">
      <el-col :span="24">
        <el-table ref="table" stripe empty-text fit v-loading="tableLoading" :data="tableData" :row-style="tableRowStyle" :row-class-name="tableRowClassName" @row-click="rowClick" @selection-change="handleMultiSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="shelvestaskcode" :label="$t('m.shelves.shelvestaskcode')">
            <template slot-scope="scope">
              <template v-if="hasPermission('table-shelvestaskCode')">
                <el-button type="text" @click.stop="getShelvesTaskResult(scope.row.shelvestask)">{{scope.row.shelvestaskcode}}</el-button>
              </template>
              <template v-else>{{scope.row.shelvestaskcode}}</template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="shelvescode" :label="$t('m.shelves.shelvescode')"></el-table-column>
          <el-table-column align="center" prop="tasknumber" :label="$t('m.tasknumber')"></el-table-column>
          <el-table-column align="center" prop="ordernumber" :label="$t('m.in.ordernumber')"></el-table-column>
          <el-table-column align="center" prop="erpordercode" :label="$t('m.in.erpordercode')"></el-table-column>
          <el-table-column align="center" :label="$t('m.shelves.shelvestype')">
            <template slot-scope="scope">{{scope.row.type|typeFilter(lan)}}</template>
          </el-table-column>
          <el-table-column align="center" :label="$t('m.state')">
            <template slot-scope="scope">{{scope.row.state|stateFilter(lan)}}</template>
          </el-table-column>
          <el-table-column align="center" prop="taskleader" :label="$t('m.shelves.charge')"></el-table-column>
          <el-table-column align="center" prop="createdate" :label="$t('m.createdate')">
            <template slot-scope="scope">{{scope.row.createdate|dateFilter}}</template>
          </el-table-column>
          <el-table-column align="center" :label="$t('m.operation')" width="160px">
            <template slot-scope="scope">
              <el-button v-if="scope.row.state!=='1'&&hasPermission('onShelve')" size="mini" type="primary" :disabled="!scope.row.taskleader" @click.stop="handleOnshelves(scope.row)">{{$t('m.shelves.shelves')}}</el-button>
              <el-button v-if="hasPermission('print')" size="mini" type="primary" @click.stop="printOpen(scope.row)">{{$t('m.print')}}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChange" @size-change="handleSizeChange"></el-pagination>
      </el-col>
    </el-row>
    <!-- table数据展示 end -->

    <!-- 指派负责人 start -->
    <assignPopup :dialogVisible="assignDialogVisible" :options="taskleaderOptions" @close="assignDialogVisible=false" @save="appointmentSave"></assignPopup>
    <!-- 指派负责人 end -->

    <!-- 根据上架任务单查询明细dialog start -->
    <shelvestaskDetailPopup :popupVisible="shelvestaskDetailVisible" :detail="popupData" @close="shelvestaskDetailVisible=false"></shelvestaskDetailPopup>
    <!-- 根据上架任务单查询明细dialog end -->

    <!-- 打印 start -->
    <shelvesPrint v-if="printVisible" :users="currentPickingusers" :popupVisible="printVisible" :detail="popupData" @close="printVisible=false"></shelvesPrint>
    <!-- 打印dialog end -->

    <!-- 上架任务dialog start -->
    <shelvestaskPopup :popupVisible="shelvestaskVisible" :detail="popupData" @callback="getData" @close="shelvestaskVisible=false"></shelvestaskPopup>
    <!-- 上架任务dialog end -->
  </div>
</template>
<script>
import shelvestaskPopup from '@/components/onShelves/shelvestask-popup'
import shelvestaskDetailPopup from '@/components/onShelves/shelvestask-detail-popup'
import shelvesPrint from '@/components/onShelves/shelvesPrint'
import assignPopup from '@/components/common/assign'
export default {
  name:'onShelvesTask',
  data(){
    return {
      currentPickingusers:'',
      formInline:{
        // shelvestaskcode:'', //上架任务单
        // shelvescode:'', // 上架单
        // ordernumber:'', // 订单号
        // tasknumber:'', // 任务号
        // productspeccode:'', //sku
        // suppliercode:'', //SupplierCode
        // state:'', // 状态
        // shelvestype:'' //上架类型
      },
      tableData:[],

      assignDialogVisible:false, // 控制指派负责人dialog显示隐藏
      taskleaderOptions:[],

      appointmentForm:{
        taskleader:''
      },
      shelvestaskDetailVisible:false, // 控制上架任务明细dialog显示隐藏
      printVisible:false,
      shelvestaskVisible:false, // 控制上架任务dialog显示隐藏
      popupData:{}
    }
  },
  mounted(){
    this.getData()
  },
  components:{
    shelvestaskPopup,
    shelvestaskDetailPopup,
    assignPopup,
    shelvesPrint
  },
  filters:{
    typeFilter(value, lan){
      return [lan('m.shelves.type1'), lan('m.shelves.type2')][value - 1]
    },
    stateFilter(value, lan){
      return [
        lan('m.shelves.state1'),
        lan('m.shelves.state2'),
        lan('m.shelves.state3')
      ][value - 1]
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    printOpen(row){
      this.getshelvestask(row.shelvesid, 'print')
    },
    getData(){
      let options = {
        method:'get',
        url:`/shelvestask/page`,
        params:Object.assign({}, this.formInline, {
          page:this.page,
          rows:this.rowSize
        })
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.page = data.current
        this.totalRows = data.total
        setTimeout(() => this.tableLoading = false, 500)
        if (!data.records.length){
          this.totalRows = 0
          return this.callbackMessage(this.$t('m.nodata'))
        }
        this.tableData = this.tableData.map(item => {
          if (!item.shelvesdate) item.shelvesdate = '---'
          return item
        })
      })
    },
    // 根据id获取上架任务明细信息
    getshelvestask(shelvestask, popup){
      let options = {
        method:'get',
        url:`/shelvestask/query/${shelvestask}`
      }
      this.$axios(options).then(({ data }) => {
        this.popupData = data
        this.currentPickingusers = !data.taskleader
          ? this.$t('m.out.notaskcharger')
          : data.taskleader
        this[`${popup}Visible`] = true
      })
    },
    search(){
      this.page=1
      this.getData()
    },
    appoint(){
      if (!this.tableRowSelected.length)
        return this.callbackMessage(this.$t('m.shelves.choose'))
      let ids = this.tableRowSelected.map(item => item.shelvestask).join(',')
      let options = {
        method:'get',
        url:`/shelvestask/taskleaders`,
        params:{ ids }
      }
      this.$axios(options).then(({ data }) => {
        this.taskleaderOptions = data
        this.assignDialogVisible = true
      })
    },
    // 指派任务 保存按钮
    appointmentSave(id){
      let taskleaderid = id
      if (taskleaderid === '')
        return this.callbackMessage(this.$t('m.choose') + this.$t('m.charge'))
      let { username:taskleader, type:usertype } = this.taskleaderOptions.find(item => {
        return item.userid === taskleaderid
      })
      let shelvestaskids = this.tableRowSelected
        .map(item => item.shelvestask)
        .join(',')
      let options = {
        method:'put',
        url:`/shelvestask/assign`,
        params:{
          shelvestaskids,
          taskleader,
          taskleaderid,
          usertype
        }
      }
      this.$axios(options).then(({ message }) => {
        this.callbackMessage(message, 'success')
        this.$refs['table'].clearSelection()
        this.assignDialogVisible = false
        this.getData()
      })
    },
    // 上架按钮
    handleOnshelves(row){
      if (!row.taskleaderid) return this.callbackMessage(this.$t('m.shelves.forbidden1'))
      this.getshelvestask(row.shelvestask, 'shelvestask')
    },
    getShelvesTaskResult(id){
      this.getshelvestask(id, 'shelvestaskDetail')
    }
  },
  beforeRouteLeave(to, form, next){
    this.assignDialogVisible = false
    this.shelvestaskDetailVisible = false
    this.printVisible = false
    this.shelvestaskVisible = false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>